<template>
  <div class="gl-typing gl-flex" id="typing">
    {{pValue}}
  </div>
</template>

<script setup>
import internal from 'stream';
import {ref} from 'vue'
  const num = ref(0)
  const props = defineProps({
    loop: {
      type: Boolean,
      default:false
    },
    value: {
      type: String,
      default:'不见细雪去满山，京都四顾灯阑珊 (使用\\<换行)'
    }
  })

 let str =  props.value;
 let strp = "";
 let i = 0;
 function print1() {
     if(str[i] != '<') {
         strp += str[i];
         document.getElementById("typing").innerHTML = strp + '|';
     }
     else {
         if(str[i - 1] == '\\') {
          document.getElementById("typing").innerHTML = strp.slice(0,strp.length - 1) + '<' + '|';
          strp = strp.slice(0,strp.length - 1) + '<';
         }
         else {
          document.getElementById("typing").innerHTML = strp + "<br><br>"+'|';
          strp += "<br><br>";
         }
     }
     i++;
 }
 function print2() {
     setTimeout(()=>{document.getElementById("typing").innerHTML=strp+'&nbsp;'},100);
     setTimeout(()=>{document.getElementById("typing").innerHTML=strp+'|'},630);
 }
if(props.loop) {
    setInterval(() => {
     print1()
     if(i==str.length)
     i = 0, strp = ''
    },120)
}
else {
  let printid=setInterval(() => {
      print1();
      if(i==str.length)
      clearInterval(printid);
  },120);  
  setInterval(print2,1060);
}

 

</script>

<style scoped>
  .gl-typing {
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
  }
</style>
